<template>
  <div v-if="isVisible" class="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
    <div class="bg-gradient-to-br from-slate-800 to-slate-900 border border-cyan-400/30 rounded-xl p-6 max-w-md w-full mx-4 shadow-xl">
      <div class="flex items-center justify-center mb-4">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
            stroke="#fbbf24"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>

      <h3 class="text-lg font-semibold text-center mb-4 text-yellow-400">重要使用声明</h3>

      <div class="space-y-3 text-sm text-gray-300 leading-relaxed">
        <p>使用本平台服务前，请仔细阅读并理解以下重要声明：</p>

        <ul class="space-y-2 pl-4">
          <li class="flex items-start">
            <span class="text-yellow-400 mr-2">•</span>
            <span>本平台为足球爱好者提供足球数据查询服务，仅供学习参考</span>
          </li>
          <li class="flex items-start">
            <span class="text-yellow-400 mr-2">•</span>
            <span>本平台仅提供数据查询工具，不涉及任何商业交易</span>
          </li>
          <li class="flex items-start">
            <span class="text-yellow-400 mr-2">•</span>
            <span>数据来自公开渠道，可能存在延迟或错误，不保证准确性</span>
          </li>
          <li class="flex items-start">
            <span class="text-yellow-400 mr-2">•</span>
            <span>请理性看待数据信息，所有数据仅供学习了解使用</span>
          </li>
          <li class="flex items-start">
            <span class="text-blue-400 mr-2">💡</span>
            <span class="text-blue-400 font-semibold">本平台仅提供足球数据查询服务，不涉及任何形式的商业活动</span>
          </li>
        </ul>

        <p class="text-xs text-gray-400 mt-4">继续使用即表示您理解并同意上述声明</p>
      </div>

      <div class="flex justify-center mt-6">
        <button
          @click="handleClose"
          :disabled="countdown > 0"
          class="cursor-pointer px-6 py-2 rounded-lg font-medium transition-all duration-200"
          :class="
            countdown > 0
              ? 'bg-gray-600 text-gray-400 cursor-not-allowed'
              : 'bg-gradient-to-r from-cyan-500 to-blue-600 text-white hover:from-cyan-600 hover:to-blue-700 hover:shadow-lg'
          "
        >
          {{ countdown > 0 ? `请仔细阅读 (${countdown}s)` : '我已了解' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  isVisible: boolean;
}>();

const emit = defineEmits<{
  close: [];
}>();

const countdown = ref(5);
let timer: NodeJS.Timeout | null = null;

watch(
  () => props.isVisible,
  (visible) => {
    if (visible) {
      countdown.value = 5;
      startCountdown();
    } else {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }
  },
);

function startCountdown() {
  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer!);
      timer = null;
    }
  }, 1000);
}

function handleClose() {
  if (countdown.value <= 0) {
    emit('close');
  }
}

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>
